<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crown" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M20,80 L30,60 L40,70 L50,50 L60,70 L70,60 L80,80 Z" fill="none" stroke="rgba(255,215,0,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23crown)"/></svg>') repeat;
            opacity: 0.2;
            z-index: -1;
        }
        
        .login-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
            width: 100%;
            max-width: 400px;
            backdrop-filter: blur(10px);
        }
        
        .login-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            color: #1a1a2e;
            padding: 2rem;
            text-align: center;
            position: relative;
        }

        .login-header::before {
            content: '👑';
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 1.5rem;
            opacity: 0.7;
        }
        
        .login-header h2 {
            margin: 0;
            font-weight: 600;
        }
        
        .login-header p {
            margin: 0.5rem 0 0 0;
            opacity: 0.9;
        }
        
        .login-body {
            padding: 2rem;
        }
        
        .form-floating {
            margin-bottom: 1rem;
        }
        
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-login {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            width: 100%;
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent);
            transition: left 0.5s;
        }

        .btn-login:hover::before {
            left: 100%;
        }
        
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
            color: white;
        }
        
        .alert {
            border-radius: 10px;
            border: none;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
            color: white;
        }
        
        .alert-success {
            background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
            color: white;
        }
        
        .form-check {
            margin: 1rem 0;
        }
        
        .form-check-input:checked {
            background-color: #667eea;
            border-color: #667eea;
        }
        
        .login-footer {
            text-align: center;
            padding: 1rem 2rem 2rem;
            color: #6c757d;
        }
        
        .login-footer a {
            color: #667eea;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .login-footer a:hover {
            color: #764ba2;
        }
        
        .default-accounts {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1rem;
            margin-top: 1rem;
            font-size: 0.875rem;
        }
        
        .default-accounts h6 {
            color: #495057;
            margin-bottom: 0.5rem;
        }
        
        .account-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
            color: #6c757d;
        }
        
        .quick-login {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        .quick-login .btn {
            flex: 1;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <!-- 登录头部 -->
        <div class="login-header">
            <h2><i class="fas fa-crown me-2"></i>王氏美容汽车集团</h2>
            <p>尊贵服务 · 王者品质</p>
        </div>
        
        <!-- 登录表单 -->
        <div class="login-body">
            <!-- 错误提示 -->
            <div th:if="${error}" class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <span th:text="${error}">错误信息</span>
            </div>
            
            <!-- 成功提示 -->
            <div th:if="${message}" class="alert alert-success" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                <span th:text="${message}">成功信息</span>
            </div>
            
            <!-- 登录表单 -->
            <form th:action="@{/perform_login}" method="post">
                <div class="form-floating">
                    <input type="text" class="form-control" id="username" name="username" 
                           placeholder="请输入用户名" required>
                    <label for="username"><i class="fas fa-user me-2"></i>用户名</label>
                </div>
                
                <div class="form-floating">
                    <input type="password" class="form-control" id="password" name="password" 
                           placeholder="请输入密码" required>
                    <label for="password"><i class="fas fa-lock me-2"></i>密码</label>
                </div>
                
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="remember-me" name="remember-me">
                    <label class="form-check-label" for="remember-me">
                        记住我
                    </label>
                </div>
                
                <button type="submit" class="btn btn-login">
                    <i class="fas fa-sign-in-alt me-2"></i>登录
                </button>
            </form>
        </div>

        <!-- 登录页脚 -->
        <div class="login-footer">
            <p>
                <a href="/forgot-password">忘记密码？</a> |
                <a href="/register">注册账号</a> |
                <a href="/">返回首页</a>
            </p>
            <p class="mb-0">
                <small>&copy; 2024 王氏美容汽车集团 v1.0.0</small>
            </p>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 自动聚焦到用户名输入框
            document.getElementById('username').focus();
            
            // 表单提交时的加载效果
            document.querySelector('form').addEventListener('submit', function() {
                const submitBtn = document.querySelector('.btn-login');
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>登录中...';
                submitBtn.disabled = true;
            });
        });
        
        // 回车键提交表单
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('form').submit();
            }
        });
    </script>
</body>
</html>
